body {
    /* 字体 */
    font-family: 'Courier New', Courier, monospace;
    /* 背景颜色 */
    background-color: #f7f7f7;
    /* 字体大小 */
    font-size: 13px;
}


#content-container {
    /*宽度*/
    width: 80%;
    height: 100%;
    margin-left: 10%;
    padding-top: 50px;

    /* 指定为 Flex 布局 */
    display: -webkit-flex; /* Safari */
    display: flex;

    /* 主轴的方向为行 */
    flex-direction: row;
    /* 主轴对其方式为向左 */
    justify-content: start;
    /*设置一条轴线排不下时换行显示*/
    flex-wrap: wrap;
}

/* 内容元素样式 */
.web-link {
    /* 链接元素的宽高 */
    width: 120px;
    height: 100px;

    /* 背景颜色 */
    background-color: #ffffff;

    /* 圆角 */
    border-radius: 5px;

    /* 投影 */
    box-shadow: 1px 1px 6px 2px #d5d5d5;

    text-align: center;

    /*调整网站标签页的边框*/
    margin-right: 20px;
    margin-bottom: 20px;

    /* 指定为 Flex 布局 */
    display: -webkit-flex; /* Safari */
    display: flex;

    /* 主轴的方向为列 */
    flex-direction: column;

    /* 主轴对其方式为两侧的间隔相等 */
    justify-content: space-around;
}

.operate-back {
    /* 指定为 Flex 布局 */
    display: -webkit-flex; /* Safari */
    display: flex;

    /* 主轴的方向为行 */
    flex-direction: row;
    justify-content: flex-end;

    height: 10px;
}

#operate-button-hover {
    background-color: #f2f2f2;
}

.operate-button {
    width: 25px;
    height: 10px;

    margin-right: 10px;
}

.edit-icon {
    /* 图片的宽高 */
    width: 15px;
    height: 10px;
}

#option-icon {
    display: none;
}

.web-img {
    /* 元素居中 */
    display: inline;
}


/* 图片样式 */
#web-logo {
    /* 图片的宽高 */
    width: 40px;
    height: 40px;

}

.web-title {
    display: inline;
}

.web-title p {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 12px;
}

.add-content {
    /* 指定为 Flex 布局 */
    display: -webkit-flex; /* Safari */
    display: flex;

    /* 主轴的方向为行 */
    flex-direction: row;
    /* 主轴对其方式为居中 */
    justify-content: center;
    /* 交叉轴对齐方式为居中 */
    align-items: center;

    width: 100%;
    height: 100%;
}

.add-img {
    /* 图片的宽高 */
    width: 50px;
    height: 50px;
}

#close {
    width: 30px;
    height: 30px;
    cursor: pointer;
    position: absolute;
    right: 5px;
    top: 5px;
    text-indent: -999em;
}

#mask {
    background-color: #ccc;
    opacity: 0.7;
    filter: alpha(opacity=70);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
}

#addweb {
    position: fixed;
    z-index: 1001;
}

.addCon {
    position: relative;

    /* 宽高 */
    width: 300px;
    height: 220px;

    /* 背景颜色 */
    background: #ffffff;;
    /* 投影 */
    box-shadow: 1px 1px 6px 2px #737373;

    /* 指定为 Flex 布局 */
    display: -webkit-flex; /* Safari */
    display: flex;

    /* 主轴的方向为行 */
    flex-direction: column;

    /* 主轴对其方式为两侧的间隔相等 */
    justify-content: space-around;

    /* 圆角 */
    border-radius: 5px;
}

.dbSite {
    position: relative;

    /* 宽高 */
    width: 300px;
    height: 300px;

    /* 背景颜色 */
    background: #ffffff;;
    /* 投影 */
    box-shadow: 1px 1px 6px 2px #737373;

    /* 指定为 Flex 布局 */
    display: -webkit-flex; /* Safari */
    display: flex;

    /* 主轴的方向为行 */
    flex-direction: column;

    /* 主轴对其方式为两侧的间隔相等 */
    justify-content: space-around;

    /* 圆角 */
    border-radius: 5px;
}

.addCon b {
    padding-left: 10px;
}

.input-item {
    width: 100%;
    /* 指定为 Flex 布局 */
    display: -webkit-flex; /* Safari */
    display: flex;

    /* 主轴的方向为行 */
    flex-direction: column;

    /* 交叉轴对齐方式为居中 */
    align-items: center;
}

.input-item b {
    width: 100%;
    padding-left: 20px;
}

.input-item input {
    width: 90%;
    height: 25px;
    outline-style: none;
}


.button-item {
    /* 指定为 Flex 布局 */
    display: -webkit-flex; /* Safari */
    display: flex;

    /* 主轴的方向为行 */
    flex-direction: row;

    /* 主轴对其方式为两侧的间隔相等 */
    justify-content: space-around;
}

/* 对Button的总体样式定义 */
.button-item button {
    width: 43%;
    height: 30px;

    /* 取消边框 */
    border: none;

    /* 圆角 */
    border-radius: 2px;
}

/* 单独设定添加按钮样式 */
.button-add {
    background-color: #006cbe;
    color: #ffffff;
}

/* 单独设定取消按钮上是 */
.button-cance {
    color: black;
}

.web-option {
    position: relative;

    /* 宽高 */
    width: 300px;
    height: 160px;

    /* 背景颜色 */
    background: #ffffff;;
    /* 投影 */
    box-shadow: 1px 1px 6px 2px #737373;

    /* 指定为 Flex 布局 */
    display: -webkit-flex; /* Safari */
    display: flex;

    /* 主轴的方向为行 */
    flex-direction: column;

    /* 主轴对其方式为两侧的间隔相等 */
    justify-content: space-around;

    /* 圆角 */
    border-radius: 5px;
}

.option-item {
    width: 100%;
    /* 指定为 Flex 布局 */
    display: -webkit-flex; /* Safari */
    display: flex;

    /* 主轴的方向为行 */
    flex-direction: column;

    /* 交叉轴对齐方式为居中 */
    align-items: center;
}

.web-option b {
    text-align: center;
}

.option-button {
    width: 90%;
    height: 30px;
    /* 取消边框 */
    border: none;

    /* 圆角 */
    border-radius: 2px;

    /* 背景颜色 */
    background-color: #f7f7f7;
}
